<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="查找部门">
        <el-input v-model="formInline.code" placeholder="输入Code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit"></el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="add">添加</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="添加" :visible.sync="dialogFormVisiblea" width="20%">
     <el-form ref="form" :model="form" label-position="left" label-width="100px">
           <el-form-item label="Code" :label-width="formLabelWidth">
             <el-input v-model="form.name" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="部门" :label-width="formLabelWidth">
             <el-input v-model="form.dept" autocomplete="off"></el-input>
           </el-form-item>
         <el-button type="primary" size="mini" @click="onSubmits">修改</el-button>
         <el-button size="mini" @click="Cancel">取消</el-button>
     </el-form>
    </el-dialog>
    <el-table
       :data="tableData"
       style="width: 100%">
       <el-table-column
         label="编号"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="部门"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="得分"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.date }}</span>
         </template>
       </el-table-column>

       <el-table-column
         label="人数"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="primary"
             @click="handleupdate(scope.$index, scope.row)">修改</el-button>
           <el-button
             size="mini"
             type="primary"
             @click="handleout(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
       <el-dialog title="修改" :visible.sync="dialogFormVisibleb" width="20%">
     <el-form ref="form" :model="forms" label-position="left" label-width="100px">
           <el-form-item label="Code" :label-width="formLabelWidth">
             <el-input v-model="form.name" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="部门" :label-width="formLabelWidth">
             <el-input v-model="form.dept" autocomplete="off"></el-input>
           </el-form-item>
         <el-button type="primary" size="mini" @click="onSubmits">修改</el-button>
         <el-button size="mini" @click="Cancel">取消</el-button>
     </el-form>
    </el-dialog>
     </el-table>
     <div class="pages" v-if="tableData!=''">
       <div class="block">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page.sync="currentPage3"
           :page-size="100"
           layout="prev, pager, next, jumper"
           :total="1000">
         </el-pagination>
       </div>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Method from '@/utils/proto'
import {posts} from '@/api/api'

export default {
    data() {
      return {
        tableData: [],
        formInline: {
           code: '',
        },
         currentPage3: 5,
         form: {
           code: '',
           dept:''
         },
         forms: {
           code: '',
           dept:''
         },
         dialogFormVisiblea:false,
         dialogFormVisibleb:false,
          formLabelWidth: '120px',
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      handleupdate(index, row) {
        let data = {
          method:Method.Method.MSG_AGENT_ACT_DEPT_UPDATE,
          token:this.$store.getters.token,
          code:this.forms.code,
          dept:this.forms.dept
        }
         posts(data).then((res) => {
      }).catch()

      },
      handleout(index, row) {
        let data = {
          method:Method.Method.MSG_AGENT_ACT_DEPT_DEL,
          token:this.$store.getters.token,
          code:this.form.code,
          dept:this.form.dept
        }
         posts(data).then((res) => {
      }).catch()
      },
      onSubmit(){
        let data={
        method:Method.Method.MSG_AGENT_ACT_DEPT_LIST,
        token:this.$store.getters.token,
        code:this.formInline.code,
      }
       posts(data).then((res) => {
         console.log(res,'dept');
        this.tableData = res.list
      }).catch()
        
      },
      onSubmits(){
       
      },
      add(){
         this.dialogFormVisiblea=true

      },
      Cancel(){
        this.dialogFormVisiblea=false
      },
      Dealact(){
      
      },

    },
    created:function(){
      this.Dealact()
      
     },
  }
</script>

<style lang="scss" scoped>
.pages{
    width: 100%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
  }
</style>
